import React, {Component} from "react"
import {View,Image,ActivityIndicator,StyleSheet} from "react-native";
import {SCREEN_WIDTH} from "../../static/js/tools"
import {connect} from "react-redux";

type Props = {};
const bgi = require("../../static/images/welcome/bg.png");
interface IProps {
    navigation?:any
}
/**
 * @Author Training
 * @Desc 欢迎页
 * @Params Props
 * @Return React Dom
 */
class Welcome extends Component<IProps>{
    public props:IProps={};
    public state:any = {};
    constructor(props: Props | Readonly<Props>){
        super(props);
        this.props = props;
    }
    componentDidMount(): void {
        // 欢迎页延迟跳转
        setTimeout(() => {
            this.props.navigation.navigate("Guide")
        },100)
    }

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {

        return (
            <View style={styles.container}>
               <Image source={bgi} style={styles.bg}></Image>
                <ActivityIndicator color={"#ccc"} style={styles.loading} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        paddingTop:30,
        flexDirection:"column",
        backgroundColor:"white"
    },
    bg:{
        width:SCREEN_WIDTH,
        height:0.6203*SCREEN_WIDTH,
        resizeMode:"cover",
    },
    loading:{
        flex:1,
    }
});
const mapStateToProps = (state:any)=>({
    // nav:state.nav
})
export default connect(mapStateToProps)(Welcome)
